<!--人才信息-->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>人才信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div>
    <!-- 条件搜索 -->
    <el-form :inline="true" class="user-search">
      <el-form-item label="姓名：">
        <el-input size="small" style="width: 200px;" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="手机号：">
        <el-input size="small" style="width: 200px;" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="职业认证：">
        <el-select v-model="jobType.value" size="small" placeholder="请选择" style="width: 120%">
          <el-option v-for="item in jobType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作">
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-search" @click="clan">重置</el-button>
      </el-form-item>
    </el-form>
<!--      <span>考证：<el-select size="small" style="width: 10%" placeholder="请选择">-->
<!--        <el-option label="不限" value=""></el-option>-->
<!--      </el-select></span>-->
<!--      <span>购买在线课程：<el-select size="small" style="width: 10%" placeholder="请选择">-->
<!--        <el-option label="不限" value=""></el-option>-->
<!--      </el-select></span>-->
<!--      <span>购名师直播：<el-select size="small" style="width: 12%" placeholder="请选择">-->
<!--        <el-option label="不限" value=""></el-option>-->
<!--      </el-select></span>-->
<!--      <br>-->
<!--      <br>-->
<!--      <span>积分：<el-input size="small" style="width: 5%;margin-right: .5%" placeholder="请输入"/>至<el-input size="small" style="width: 5%;margin-left: .5%" placeholder="请输入"/></span>-->
<!--      <span>零钱：<el-input size="small" style="width: 5%;margin-right: .5%" placeholder="请输入"/>至<el-input size="small" style="width: 5%;margin-left: .5%" placeholder="请输入"/></span>-->
<!--      <span>培训：<el-select size="small" style="width: 10%" placeholder="请选择">-->
<!--        <el-option label="不限" value=""></el-option>-->
<!--      </el-select></span>-->
<!--      <span>职业竞赛：<el-select size="small" style="width: 10%" placeholder="请选择">-->
<!--        <el-option label="不限" value=""></el-option>-->
<!--      </el-select></span>-->
<!--      <span>推广员：<el-select size="small" style="width: 10%" placeholder="请选择">-->
<!--        <el-option label="不限" value=""></el-option>-->
<!--      </el-select></span>-->

    </div>
    <!--表格与导出-->
    <el-button size="small" type="primary" @click="downphoneno">导出手机号</el-button>
    <el-table size="small" :data="jiluserList" border style="width: 100%">
      <!--      <el-table-column  type="selection" prop="date"></el-table-column>-->
<!--      <el-table-column type="index"  prop="index" label="序号"></el-table-column>-->
      <el-table-column prop="user_name" label="姓名" width="82%"/>
      <el-table-column prop="user_phoneno" label="绑定手机号" width="110%"/>
      <el-table-column prop="user_kzispass" label="职业取证" width="100%"/>
      <el-table-column prop="user_qb" label="钱包零钱（元）" width="110%"/>
      <el-table-column prop="user_jf" label="积分" width="55%"/>
      <el-table-column prop="user_bccount" label="已购在线课程" width="100%"/>
      <el-table-column prop="user_bczbcount" label="已购名师直播" width="100%"/>
      <el-table-column prop="user_kzcount" label="考证" width="50%"/>
      <el-table-column prop="user_pxcount" label="培训" width="50%"/>
      <el-table-column prop="user_tklxcount" label="题库练习" width="70%"/>
      <el-table-column prop="user_tkmncount" label="模拟考" width="60%"/>
      <el-table-column prop="user_jscount" label="职业竞赛" width="70%"/>
      <el-table-column prop="user_regtype" label="注册来源" width="110%"/>
      <el-table-column prop="user_tgusercode" label="推广员" width="100%"/>
      <el-table-column prop="address" label="操作">
        <template v-slot="scope">
          <el-link type="primary" @click="memuseDetails(scope.$index,scope.row)">人才简历</el-link>
          <el-link type="primary" @click="studyContent(scope.$index,scope.row)">考证学习情况</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <span>共 {{ totalQuestions }} 条</span>
      <el-select
        v-model="pageSize"
        @change="handleSizeChange"
        style="width: 100px; margin: 0 10px;"
      >
        <el-option
          v-for="size in [10, 20, 30, 50]"
          :key="size"
          :label="`${size}条/页`"
          :value="size"
        ></el-option>
      </el-select>
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalQuestions"
        layout="prev, pager, next, jumper"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import { queryjl } from '../../api/PractitionerApi'
import {queryallin, querycyuser} from "../../api/InstitutionApi";
import * as XLSX from "xlsx";
import {saveAs} from 'file-saver'
import {formatDate} from "../../utils/util";

export default defineComponent({
  name: "index",
  data(){
    return {
      // 职业认证
      jobType:[
        {
          value: '0',
          label: '不限'
        },
        {
          value: '1',
          label: '已认证'
        },
        {
          value: '2',
          label: '未认证'
        },
      ],
      jiluserList: [],
      checked: false,
      usercode: '',
      // 分页
      currentPage: 1, ///当前页码
      pageSize: 10,  ///每页几行
      totalQuestions: 0  ///总记录数
    }

  },
  created() {
    // this.selectMemuse()
    // 查询所有人员数据
    this.selectPersonInfo()
  },
  methods: {
    // 查询所有人才数据
    selectPersonInfo() {
      queryallin({
        "pageindex": this.currentPage,
        "pagesize": this.pageSize
      }).then(res => {
        console.log('查询简历：',res)
        this.jiluserList = res.data.base_info
        this.totalQuestions = res.data.tolcount
      })
    },

    // 查询所有简历
    selectMemuse(){
      queryjl({ }).then(res => {
        console.log('查询简历：',res)
        this.jiluserList = res.data.jluserlist;

      })

    },
    // 查看简历详情
    memuseDetails(index,row) {
      // 根据手机事情查询用户usercode
      querycyuser({
        "phoneno": row.user_phoneno,
      }).then(res => {
        console.log('简历：',res)
        this.usercode = res.data.base_info.user_code
        // 方式3：带查询参数（显示在URL中）
        // 接收方式：this.$route.query.flowid;
        this.$router.push({
          path: '/talents/Resume',
          query: { usercode: this.usercode }
        });
      })
    },

    // 导出手机号
    downphoneno() {
      // 实际项目中这里应该调用API导出Excel
      setTimeout(() => {
        //自定义导出
        let nowDataTime = formatDate(new Date())
        console.log('日期时间:', nowDataTime)
        const header = ['姓名', '手机号']
        // console.log('导出',this.this.exportAllQ)
        const body = this.jiluserList.map(r => [r.user_name,r.user_phoneno])
        const ws = XLSX.utils.aoa_to_sheet([header, ...body])
        const wb = XLSX.utils.book_new()
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
        const wbout = XLSX.write(wb, {bookType: 'xlsx', type: 'array'})
        saveAs(new Blob([wbout], {type: 'application/octet-stream'}), '人员信息' + nowDataTime + '.xlsx')
      }, 1000)

    },

    // 分页方法
    handleSizeChange(size) {
      console.log('当前页:', size, this.currentPage);
      // 默认第1页,默认每页显示10条
      this.pageSize = size;
      this.handlePageChange(1);
    },
    handlePageChange(page) {
      console.log('当前页:', this.pageSize, this.currentPage + 1);
      this.currentPage = page;
      this.selectPersonInfo()
    },



  }
})
</script>

<style scoped>
.body-box{
  width: 100%;
  margin-top: 2%;
  margin-left: .5%;
  span{
    margin-left: 0.5%;
    justify-content: space-between;
  }
}

.el-table{
  margin-top: 1%;
}

.el-pagination{
  margin-top: 1%;
  float: right;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
}


</style>
